<template>
  <view class="login-container">
    <view class="welcome-message">
      <text class="greeting">您好，</text>
      <text class="welcome-title">欢迎使用智能门锁！</text>
      <text class="instructions">请使用您之前在平台中用于登录的手机号<br>如手机号并未注册过，我们将自动为您注册</text>
    </view>

    <view class="login-form">
      <view class="input-group country-region">
        <input 
          class="input" 
          type="text" 
          placeholder="国家/地区" 
          v-model="loginForm.countryRegion"
          value="中国 (+86)"
          disabled
        />
        <text class="arrow">&gt;</text>
      </view>

      <view class="input-group phone-number">
        <input 
          class="input" 
          type="tel" 
          placeholder="请输入手机号" 
          v-model="loginForm.phoneNumber"
        />
      </view>

      <view class="agreement-checkbox">
        <checkbox :checked="loginForm.agree" @change="toggleAgree" />
        <text>我已阅读并同意《用户服务协议》和《智能门锁隐私政策》</text>
      </view>

      <button class="next-btn" @click="handleNext">下一步</button>
    </view>
  </view>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const loginForm = ref({
      countryRegion: '中国 (+86)',
      phoneNumber: '',
      agree: false
    })

    const handleNext = () => {
      if (!loginForm.value.phoneNumber) {
        uni.showToast({
          title: '请输入手机号',
          icon: 'none'
        })
        return
      }

      if (!loginForm.value.agree) {
        uni.showToast({
          title: '请阅读并同意用户服务协议和隐私政策',
          icon: 'none'
        })
        return
      }

      // 模拟下一步操作
      uni.showToast({
        title: '验证成功，请继续',
        icon: 'success'
      })
      
      setTimeout(() => {
        uni.navigateTo({
          url: '/pages/verify/verify'
        })
      }, 1000)
    }

    const toggleAgree = (e) => {
      loginForm.value.agree = e.target.value
    }

    return {
      loginForm,
      handleNext,
      toggleAgree
    }
  }
}
</script>

<style scoped>
.login-container {
  padding: 100rpx 50rpx 0;
  height: 100vh;
  background: linear-gradient(to bottom, #f5f5f5, #ffffff);
}

.welcome-message {
  text-align: center;
  margin-bottom: 50rpx;
}

.greeting {
  font-size: 48rpx;
  color: black;
  font-weight: bold;
}

.welcome-title {
  font-size: 48rpx;
  color: black;
  font-weight: bold;
  margin-top: 10rpx;
}

.instructions {
  font-size: 32rpx;
  color: gray;
  margin-top: 20rpx;
}

.login-form {
  background-color: white;
  border-radius: 20rpx;
  padding: 50rpx 30rpx;
}

.input-group {
  margin-bottom: 30rpx;
  border-bottom: 1rpx solid #eee;
  display: flex;
  align-items: center;
}

.input {
  height: 80rpx;
  font-size: 32rpx;
  flex: 1;
}

.arrow {
  margin-left: 10rpx;
  color: gray;
}

.agreement-checkbox {
  display: flex;
  align-items: center;
  margin-bottom: 40rpx;
}

.next-btn {
  background-color: #ff9966;
  color: white;
  border-radius: 10rpx;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 32rpx;
  width: 100%;
}
</style>